<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="layout/base :: layout(~{::title}, ~{::main})">
<head>
    <title>写文章 - 博客系统</title>
</head>
<body>
    <main>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <h3 class="card-title mb-4">写文章</h3>
                        <form id="articleForm">
                            <div class="mb-3">
                                <label for="title" class="form-label">标题</label>
                                <input type="text" class="form-control" id="title" name="title"
                                       required minlength="1" maxlength="100">
                            </div>
                            <div class="mb-3">
                                <label for="content" class="form-label">内容</label>
                                <textarea class="form-control" id="content" name="content"
                                         rows="15" required></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="tags" class="form-label">标签</label>
                                <input type="text" class="form-control" id="tags" name="tags"
                                       placeholder="使用逗号分隔多个标签">
                            </div>
                            <div class="d-flex justify-content-between">
                                <button type="button" class="btn btn-secondary" onclick="history.back()">返回</button>
                                <button type="submit" class="btn btn-primary">发布文章</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <script th:inline="javascript">
            document.getElementById('articleForm').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const title = document.getElementById('title').value;
                const content = document.getElementById('content').value;
                const tags = document.getElementById('tags').value
                    .split(',')
                    .map(tag => tag.trim())
                    .filter(tag => tag.length > 0);

                fetch('/api/articles', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + getToken()
                    },
                    body: JSON.stringify({
                        title: title,
                        content: content,
                        tags: tags
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        window.location.href = '/article/' + data.data.id;
                    } else {
                        alert(data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('发布文章失败');
                });
            });
        </script>
    </main>
</body>
</html> 